/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Nov 27, 2013, 8:29:02 PM
    Author     : THICH HOA DONG TIEN
*/

*{
    /* A universal CSS reset */
    margin:0;
    padding:0;
}

/*body{
        font-size:14px;
        color:#666;
        background:#111 no-repeat;
        
        /* CSS3 Radial Gradients */
/*background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));

font-family:Arial, Helvetica, sans-serif;
}*/

#navigationMenu li{
    list-style:none;
    height:70px;
    padding:2px;
    width:72px;
}

#navigationMenu span{
    /* Container properties */
    width:0;
    left:72px;
    padding:0;
    position:absolute;
    overflow:hidden;

    /* Text properties */
    font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
    font-size:18px;
    font-weight:bold;
    letter-spacing:0.6px;
    white-space:nowrap;
    line-height:70px;

    /* CSS3 Transition: */
    -webkit-transition: 0.25s;

    /* Future proofing (these do not work yet): */
    -moz-transition: 0.25s;
    transition: 0.25s;
}

#navigationMenu a{
    background:url('../images/home.jpg') no-repeat;

    height:70px;
    width:72px;
    display:block;
    position:relative;
}

/* General hover styles */

#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
    text-decoration:none;

    /* CSS outer glow with the box-shadow property */
    -moz-box-shadow:0 0 5px #9ddff5;
    -webkit-box-shadow:0 0 5px #9ddff5;
    box-shadow:0 0 5px #9ddff5;
}

/* Green Button */

#navigationMenu .home {	background-position:0 0;background:url('../images/home.jpg') no-repeat;}
#navigationMenu .home:hover {	background:url('../images/home.jpg') no-repeat;}
#navigationMenu .home span{
    background-color:#7da315;
    color:#3d4f0c;
    text-shadow:1px 1px 0 #99bf31;
}

/* Blue Button */

#navigationMenu .about { background-position:-38px 0;background:url('../images/about.jpg') no-repeat;}
#navigationMenu .about:hover { background:url('../images/about.jpg') no-repeat;}
#navigationMenu .about span{
    background-color:#1e8bb4;
    color:#223a44;
    text-shadow:1px 1px 0 #44a8d0;
}

/* Orange Button */

#navigationMenu .services { background-position:-76px 0; background:url('../images/services.jpg') no-repeat;}
#navigationMenu .services:hover {  background:url('../images/services.jpg') no-repeat;}
#navigationMenu .services span{
    background-color:#c86c1f;
    color:#5a3517;
    text-shadow:1px 1px 0 #d28344;
}

/* Yellow Button */

#navigationMenu .portfolio { background-position:-114px 0; background:url('../images/thongbao.jpg') no-repeat;}
#navigationMenu .portfolio:hover{  background:url('../images/thongbao.jpg') no-repeat;}
#navigationMenu .portfolio span{
    background-color:#d0a525;
    color:#604e18;
    text-shadow:1px 1px 0 #d8b54b;
}

/* Purple Button */

#navigationMenu .contact { background-position:-152px 0; background:url('../images/lienhe.jpg') no-repeat;}
#navigationMenu .contact:hover {  background:url('../images/lienhe.jpg') no-repeat;}
#navigationMenu .contact span{
    background-color:#af1e83;
    color:#460f35;
    text-shadow:1px 1px 0 #d244a6;
}

/* The styles below are only needed for the demo page */



/*social icon */
.socialicon ul {
    list-style:none;
    padding:10px;
    margin:0;
    overflow:hidden;
    font:0.875em/1 Arial, sans-serif;
}

.socialicon ul li {
    float:left;
    width:66px;
    height:66px;
    margin:20px 20px 0 0;
}

.socialicon ul li a {
    display:block;
    width:64px;
    height:64px;
    overflow:hidden;
    border:1px solid transparent;
    line-height:64px;
    text-decoration:none;
    /* css3 */
    text-shadow:0 -1px 0 rgba(0,0,0,0.5);
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px; /* standards version last */
}

.socialicon ul li a:hover,
.socialicon ul li a:focus,
.socialicon ul li a:active {
    opacity:0.8;
    border-color:#000;
}
.socialicon .rss a {
    position:relative;
    width:60px;
    padding:0 2px;
    border-color:#ea6635;
    text-transform:lowercase;
    text-indent:-186px;
    font-size:64px;
    font-weight:bold;
    color:#fff;
    background:#e36443;

    /* css3 */
    -moz-box-shadow:0 0 4px rgba(0,0,0,0.4);
    -webkit-box-shadow:0 0 4px rgba(0,0,0,0.4);
    box-shadow:0 0 4px rgba(0,0,0,0.4);
    background:-webkit-gradient(linear, left top, left bottom, from(#f19242), to(#e36443));
    background:-moz-linear-gradient(top, #f19242, #e36443);
    background:linear-gradient(top, #f19242, #e36443);
}

.socialicon .rss a:before,
.socialicon .rss a:after {
    content:"";
    position:relative;
    bottom:10px;
    left:10px;
}

/* create circle */
.socialicon .rss a:before {
    width:12px;
    height:12px;
    background:#fff;
    /* css3 */
    -moz-border-radius:12px;
    -webkit-border-radius:12px;
    border-radius:12px;
}

/* create the two arcs */
.socialicon .rss a:after {
    width:22px;
    height:22px;
    border-style:double;
    border-width:24px 24px 0 0;
    border-color:#fff;
    /* css3 */
    -moz-border-radius:0 50px 0 0;
    -webkit-border-radius:0 50px 0 0;
    border-radius:0 50px 0 0;
}
.facebook{ background: url(../images/face.jpg) no-repeat;}
.twitter{background: url(../images/twitter.jpg)no-repeat;}

/* button dang ki ngay*/

/* Form */
.rightindex{
    border-left: 1px solid #a39f9f;width: 75%; margin-left: 25%;
}
.giohang{
    margin-left: 300px;
    width: 50px;
}